import { defineComponent, h, inject, Ref } from "vue"
import { ProvideSelectStateKey, ProvideTableRefKey, ProvideEditStateKey, ProvideContextmenu, ProvideRootProps } from "./keys"
import { useEditComponentOptions } from "./components/hooks"
import { useCheck } from "./hooks/check"

const WebExcelCell = defineComponent(
    (props: CellProps, { slots }) => {
    
        const TableRef: Ref<HTMLElement> = inject(ProvideTableRefKey) as Ref<HTMLElement>
        const RootProps = inject(ProvideRootProps) as Props
        const { checkDisabled, checkReadonly } = useCheck(props)
        const { checkReadyEdit, checkDoingEdit, readyEdit, doingEdit, resetEditState } = inject(ProvideEditStateKey) as EditCellStateResult
        const { 
            checkSelected,
            checkSelectedRowindex, 
            startSelect, 
            moveSelect, 
            checkSelectedFirstRowCell, 
            checkSelectedLastRowCell,
            checkSelectedFirstColCell,
            checkSelectedLastColCell,
        } = inject(ProvideSelectStateKey) as SelectCellStateResult
        const { tiggleVisibleContextmenu, setPositionContextmenu } = inject(ProvideContextmenu) as ContextmenuResult

        
        function mousedownHandel(e: MouseEvent) {
            if (e.button !== 0 && checkSelected(props.rowIndex, props.colIndex)) return;
            if (checkReadyEdit(props.rowIndex, props.colIndex)) return;
            if (checkDoingEdit(props.rowIndex, props.colIndex)) return;

            resetEditState()
            
            if (RootProps.selectUnit === 'row' || props.isRowindex) {
                startSelect(props.rowIndex, 0)
                moveSelect(props.rowIndex, RootProps.columns.length - 1)
            } else {
                startSelect(props.rowIndex, props.colIndex)
            }

            TableRef.value.addEventListener('mousemove',mousemoveHandel)
            document.body.addEventListener('mouseup', mouseupHandel)
            
            function mousemoveHandel(){
                const target = event?.target as HTMLElement
                if (target.classList.contains('cell')) {
                    const rowindex = target.getAttribute('data-rowindex')
                    const colindex = target.getAttribute('data-colindex')
                    // if (rowindex !== null && colindex !== null){
                        
                        if (RootProps.selectUnit === 'row' || props.isRowindex) {
                            moveSelect(Number(rowindex), 0)
                            moveSelect(Number(rowindex), RootProps.columns.length - 1)
                        } else {
                            moveSelect(Number(rowindex), Number(colindex))
                        }

                    // }
                }
            }
            function mouseupHandel(){
                TableRef.value.removeEventListener('mousemove',mousemoveHandel)
                document.body.removeEventListener('mouseup', mouseupHandel)
            }
        }


        function clickHandel(e: MouseEvent) {
            if (checkReadonly() || checkDisabled()) return
            if (checkDoingEdit(props.rowIndex, props.colIndex)) return;
            readyEdit(props.rowIndex, props.colIndex)
        }
        function dblclickHandel(){
            if (checkReadonly() || checkDisabled()) return
            if (checkDoingEdit(props.rowIndex, props.colIndex)) return;
            doingEdit(props.rowIndex, props.colIndex)
        }
        function contextmenuHandel(e: MouseEvent){
            e.preventDefault();
            tiggleVisibleContextmenu(true)
            setPositionContextmenu({ left: e.clientX, top: e.clientY })
        }

        
        return () => h(
            'div', 
            {
                class: {
                    'selected': props.isRowindex ? checkSelectedRowindex(props.rowIndex) : checkSelected(props.rowIndex, props.colIndex),
                    'selected-first-row-cell': checkSelectedFirstRowCell(props.rowIndex, props.colIndex),
                    'selected-last-row-cell': checkSelectedLastRowCell(props.rowIndex, props.colIndex),
                    'selected-first-col-cell': checkSelectedFirstColCell(props.rowIndex, props.colIndex),
                    'selected-last-col-cell': checkSelectedLastColCell(props.rowIndex, props.colIndex),
                    'edit-doing': checkDoingEdit(props.rowIndex, props.colIndex),
                    'edit-ready': checkReadyEdit(props.rowIndex, props.colIndex),
                    'disabled': checkDisabled()
                },
                'data-rowindex': props.rowIndex,
                'data-colindex': props.colIndex,
                onMousedown: mousedownHandel,
                onClick: clickHandel,
                onDblclick: dblclickHandel,
                onContextmenu: contextmenuHandel,
            },
            {
                default: () => {
                    const isInsertEditComponent = (checkReadyEdit(props.rowIndex, props.colIndex) || checkDoingEdit(props.rowIndex, props.colIndex))
                    return [
                        props.column.rander?.(props) ?? slots.default?.(),
                        isInsertEditComponent ? slots.editCell?.(props) : undefined
                    ]
                }
            }
        )
    },
    useEditComponentOptions()
)


export { WebExcelCell }